<template>
  <a-layout class="master-layout">
    <a-layout-sider
      :trigger="null"
      collapsible
      v-model="collapsed"
      width="300"
      :collapsedWidth="0"
    >
      <div class="logo">教学管理系统</div>
      <a-menu
        :default-selected-keys="defaultSelectedKeys"
        mode="inline"
        theme="dark"
        :inline-collapsed="collapsed"
        @select="onMenuSelect"
      >
        <a-menu-item key="1" v-if="$store.state.userData.roleName != 'admin'">
          <a-icon type="pie-chart" />
          <span>课程计划管理</span>
        </a-menu-item>
        <a-menu-item key="2" v-if="$store.state.userData.roleName == 'educator'">
          <a-icon type="desktop" />
          <span>训练计划管理</span>
        </a-menu-item>
        <a-menu-item key="3" v-if="$store.state.userData.roleName != 'admin'">
          <a-icon type="user" />
          <span>考核信息管理</span>
        </a-menu-item>
        <a-menu-item key="4" v-if="$store.state.userData.roleName == 'admin'">
          <a-icon type="pie-chart" />
          <span>教员信息管理</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header>
        <div>
          <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
        <a-button type="primary" @click="$router.push({name:'home'})">返回</a-button>
        </div>
        <div
          class="backlogItpm"
          style="font-size: 30px"
          @click="onclickBacklogItpm"
        >
          关键声隐身装备教学与装备维护综合实验平台
        </div>
        <div class="user">
          <a-dropdown>
            <span class="user-center-wrapper ant-dropdown-link">
              <a-icon class="user-center-avatar" type="user" />
              {{ userName }}
            </span>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item>
                <a>
                  <div class="user-center-wrapper-item">
                    <a-icon type="logout" />&nbsp;登出
                  </div>
                </a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </a-layout-header>
      <a-layout-content>
        <!-- <router-view></router-view> -->
        <CourseTrainingPlan
          v-if="active == 'CourseTrainingPlan'"
          :role="role"
        />
        <TrainingPlan v-if="active == 'TrainingPlan'&&$store.state.userData.roleName == 'educator'" :role="role" />
        <AssessmentInf
          v-if="active == 'AssessmentInf'"
          @changeActved="changeActved"
          :role="role"
        />
        <AssessmentTheory
          v-if="active == 'AssessmentTheory'"
          @goBack="goBack"
          :detailData="detailData"
          :role="role"
        />
        <TeacherManage v-if="active == 'TeacherManage'" />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
import CourseTrainingPlan from "./CourseTrainingPlan.vue"; //课程计划管理
import TrainingPlan from "./TrainingPlan.vue"; //训练计划管理
import AssessmentInf from "./AssessmentInf.vue"; //考核信息管理
import AssessmentTheory from "@/components/Assessment/theory.vue"; //考核信息详情页面
import TeacherManage from "./TeacherManage.vue"; //教员管理系统
import { message } from "ant-design-vue";
import "moment/locale/zh-cn";
export default {
  name: "app",
  components: {
    CourseTrainingPlan, //课程计划管理
    TrainingPlan, //训练计划管理
    AssessmentInf, //考核信息管理
    AssessmentTheory, //考核信息详情页面
    TeacherManage, //教员管理系统
  },
  data() {
    return {
      defaultSelectedKeys: [],
      userName: "",
      role: null, //3是管理,1是学员
      name: this.$route.name,
      locale: zh_CN,
      collapsed: false,
      menuList: [], //表示菜单选项内容
      active: "", //默认为课程计划管理
      detailData: null, //考核信息详情页面所需参数
    };
  },
  created() {
    this.getUser(); //获取用户信息
  },
  methods: {
    async getUser() {
      const userData = JSON.parse(localStorage.getItem("userData"));
      if (userData) {
        this.$store.commit("setUserData", userData);
      }
      if (this.$store.state.userData.roleName == "admin") {
        //管理员权限
        this.defaultSelectedKeys = ["4"];
        this.active = "TeacherManage";
      } else {
        this.defaultSelectedKeys = ["1"];
        this.active = "CourseTrainingPlan";
      }
    },
    changeActved(val) {
      if (val.data) {
        this.detailData = { ...val.data };
      }
      this.active = val.routeName; //跳转到查看考核信息详情页面,或者返回查看考核信息页面
    },
    goBack() {
      this.detailData = null;
      this.active = "AssessmentInf"; //返回到考核信息管理页面
    },
    onMenuSelect({ key }) {
      switch (key) {
        case "1":
          this.active = "CourseTrainingPlan"; //课程计划管理
          break;
        case "2":
          this.active = "TrainingPlan"; //训练计划管理
          break;
        case "3":
          this.active = "AssessmentInf"; //考核信息管理
          break;
        case "4":
          this.active = "TeacherManage"; //考核信息管理
          break;
      }
    },
    handleMenuClick(e) {
      this.$axios.get("/logout").then((res) => {
        if (res.code == 200) {
          message.success(res.data);
          localStorage.removeItem("token"); // 删除存储在 'token' 键下的数据
          this.$router.push({ name: "login" });
        }
      });
    },
    onclickBacklogItpm() {
      // this.$router.push({ name: "ItpmProjectManagement" });
    },
  },
};
</script>
<style scoped>
</style>
